// 关联业务
<template>
  <el-dialog
    v-el-drag-dialog="{updataFull, updataDialogWidth}"
    :fullscreen="isfullscreen"
    :title="$t('ASSOCIATED_SERVICE')"
    :visible="dialogVisible"
    :width="setDialogWidth('80%')"
    @close="close"
  >
    <el-table :data="tableData" height="400" border>
      <template slot="empty">
        <NullData />
      </template>
      <el-table-column
        type="index"
        :label="$t('SEQUENCE')"
        :width="resetSize(60)"
        align="center"
      />
      <el-table-column
        :label="$t('SERVICE_NAME')"
        prop="bizName"
        width="150"
        show-overflow-tooltip
      />
      <el-table-column
        :label="$t('SERVICE_CODE')"
        prop="resourceCode"
        show-overflow-tooltip
      />
      <el-table-column
        :label="$t('BIZ_LEVEL')"
        width="80"
        prop="resourceCode"
        show-overflow-tooltip
      >
        <template v-slot="scope">
          {{ scope.row.bizLevel ? dictMap.BIZ_LEVEL[scope.row.bizLevel] : '' }}
        </template>
      </el-table-column>
      <el-table-column
        :label="$t('SERVICE_STATUS')"
        prop="bizStatus"
        show-overflow-tooltip
      >
        <template v-slot="scope">
          {{
            scope.row.bizChannelList
              .map(i => dictMap.BIZ_STATUS[i.bizStatus])
              .join()
          }}
        </template>
      </el-table-column>

      <el-table-column
        :label="$t('A_END_STATION_NAME')"
        prop="startStationName"
        show-overflow-tooltip
      />
      <el-table-column
        :label="$t('ANODE')"
        prop="startNode.nodeName"
        show-overflow-tooltip
      />
      <el-table-column
        :label="$t('ZNODE')"
        prop="endNode.nodeName"
        show-overflow-tooltip
      />
      <el-table-column
        :label="$t('Z_END_STATION')"
        prop="endStationName"
        show-overflow-tooltip
      />
      <el-table-column
        :label="$t('IS_RECOVERY_AUTO')"
        prop="isAutoRestore"
        width="125"
        show-overflow-tooltip
      >
        <template v-slot="scope">
          {{ scope.row.isAutoRestore ? $t('OK_YES') : $t('OK_NO') }}
        </template>
      </el-table-column>
      <el-table-column
        :label="$t('LINK_DETECTION')"
        prop="isOtdrTest"
        width="150"
        show-overflow-tooltip
      >
        <template v-slot="scope">
          {{ scope.row.isOtdrTest ? $t('OK_YES') : $t('OK_NO') }}
        </template>
      </el-table-column>
      <el-table-column
        :label="$t('BUCKUP_NUM')"
        prop="backNumber"
        width="100"
        show-overflow-tooltip
      />
    </el-table>
    <span slot="footer">
      <el-button @click="close">{{ $t('CLOSE') }}</el-button>
      <el-button type="primary" @click="queryList">{{
        $t('REFRESH')
      }}</el-button>
    </span>
  </el-dialog>
</template>
<script>
  import { mapGetters } from 'vuex'
  import BizOpenApi from '@/api/oen/BizOpenApi.js'
  export default {
    props: {
      dialogVisible: {
        type: Boolean,
        default: false
      },
      node: {
        type: Object,
        default: () => {}
      }
    },
    data() {
      return {
        tableData: []
      }
    },
    computed: {
      ...mapGetters(['baseRegionList', 'dictMap', 'dictList'])
    },
    mounted() {
      this.node.nodeId && this.queryList()
    },
    methods: {
      // 根据站点id查询关联业务
      queryList() {
        this.tableData = []
        BizOpenApi.queryList({ stationId: this.node.nodeId })
          .then(res => {
            if (res && res.length) {
              res.sort((a, b) => {
                return b.createTime < a.createTime ? -1 : 1
              })
              this.tableData = [...res]
              this.tableData.forEach(i => {
                i.startStationName = this.getRegionName(i.startStationId)
                i.endStationName = this.getRegionName(i.endStationId)
              })
            }
          })
          .catch(err => {
            console.log(err)
          })
      },
      close() {
        this.$emit('update:dialogVisible', false)
      },
      // 获取区域/站点/机房
      getRegionName(stationId) {
        const stationData = this.baseRegionList.find(
          i => i.regionId === stationId
        )
        return stationData ? stationData.regionName : ''
      }
    }
  }
</script>
